<template>
  <div>
    <div class="bg-white">
      <div class="w d-flex align-items-center">
        <div
          class="
            form
            d-flex
            align-items-center
            justify-content-between
            border
            mt-3
            mb-3
          "
        >
          <input
            type="text"
            placeholder="输入关键字"
            class="broder-right"
            v-model="v"
          />
          <div class="dropdown">
            <button class="rounded">
              全部
              <i class="fa fa-angle-down" aria-hidden="true"></i>
            </button>
          </div>
          <div class="searchbtn" @click="tosearch"></div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="content1" v-if="show">
        <div class="w">
          <div
            class="
              cont1-header
              d-flex
              flex-column
              align-items-center
              justify-content-center
            "
          >
            <h2>最新推荐</h2>
            <p>LATEST RECOMMENDATION</p>
          </div>
          <div class="w mt-4">
            <div class="row">
              <div
                class="col-6 col-lg-3 mb-4"
                style="padding: 0 12px"
                v-for="item in recommendModule.recent_recommend"
                :key="item.id"
              >
                <comp-search-item :item="item"></comp-search-item>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content2" v-else>
        <div class="bg-white pt-3 pb-3">
          <div class="w">
            <ul class="d-flex flex-row">
              <li class="active">作品</li>
              <li>正在出售的作品</li>
              <li>插画作者</li>
              <li>外包服务</li>
            </ul>
            <ol class="d-flex justify-content-end w-100">
              <li class="on">最新</li>
              <li>赞最多</li>
            </ol>
          </div>
        </div>
        <div class="w mt-4">
          <div class="row">
            <div
              class="col-6 col-lg-3 mb-4"
              style="padding: 0 12px"
              v-for="item in searchlist"
              :key="item.id"
            >
              <comp-search-item :item="item"></comp-search-item>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import CompSearchItem from "../components/comp-search-item.vue";
export default {
  components: {
    CompSearchItem,
  },
  data() {
    return {
      show: true,
      v: "",
      searchlist: [],
    };
  },
  computed: {
    ...mapState(["searchModule", "recommendModule"]),
  },
  methods: {
    getDate(v) {
      this.axios
        .get("http://127.0.0.1:8080/search", { params: { keyword: v } })
        .then((res) => {
          if (res.data.code == 2000) {
            this.show = false;
            this.$store.dispatch(
              "searchModule/setSearchArray2",
              res.data.result
            );
            this.searchlist = res.data.result;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    tosearch() {
      this.getDate(this.v);
    },
  },
  mounted() {
    let key = this.$route.query.key;
    // console.log(key);
    if (key == undefined) {
      this.show = true;
    } else {
      this.show = false;
      this.v = key;
      this.getDate(key);
    }
  },
};
</script>

<style lang="less" scoped>
@import "../assets/reset";
.form {
  height: 58px;
  width: 100%;
  input {
    height: 30px;
    font-size: 14px;
    padding-left: 15px;
    flex: 1;
  }
  .dropdown {
    margin: 0 20px;
    button {
      padding: 3px 5px;
      font-size: 14px;
    }
  }
  .searchbtn {
    height: 56px;
    width: 60px;
    background-color: #f3cc47;
    background-image: url();
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: 50% 50%;
    cursor: pointer;
  }
}
.width {
  width: 100%;
  padding-bottom: 30px;
}
.content {
  .content1 {
    .width();
    padding-top: 30px;
    .cont1-header {
      h2 {
        font-weight: lighter;
        font-size: 30px;
      }
    }
  }
  .content2 {
    .width();

    color: #999;
    ul {
      li {
        margin-right: 20px;
      }
      .active {
        background-color: #27292c;
        color: #fff;
        padding: 3px 5px;
        border-radius: 3px;
      }
    }
    ol {
      li {
        margin-left: 20px;
      }
      .on {
        color: #000;
      }
    }
  }
}
</style>